import { Button, Form, Input, InputNumber, Card, Alert } from 'antd';
import HeaderView from '../components/HeaderView';
import React, { useState } from 'react';
import { putNotice } from '../api/notice';
import { useNotice } from '../store/hooks/useNotice';
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 8,
  },
};

const NoticeView = () => {
  const [form] = Form.useForm();
  const { uid, username, setUsername, setUid } = useNotice();
  const onFinish = (values) => {
    console.log(uid);
    putNotice(
      values.cate,
      values.addr,
      values.content,
      uid,
      values.radius
    ).then((res) => {
      console.log(res);
      if (res.data.code == 0) {
        alert('发布成功');
      } else {
        alert('发布失败');
      }
    });
  };

  return (
    <div>
      <HeaderView />
      <Card
        title="发布公告"
        style={{ textAlign: 'center', width: '700px', margin: '30px auto' }}
      >
        <Form {...layout} form={form} name="notice" onFinish={onFinish}>
          <Form.Item
            name="cate"
            label="公告标题"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input />
          </Form.Item>
          <Form.Item name="uid" label="发起人" initialValue={username}>
            <Input style={{ width: '216px' }} />
          </Form.Item>
          <Form.Item
            name="radius"
            label="影响范围"
            rules={[
              {
                type: 'number',
                required: true,
              },
            ]}
          >
            <InputNumber style={{ width: '216px' }} />
          </Form.Item>
          <Form.Item
            name="addr"
            label="发生地点"
            rules={[
              {
                type: 'chart',
                required: true,
              },
            ]}
          >
            <Input style={{ width: '216px' }} />
          </Form.Item>
          <Form.Item
            name="content"
            label="公告内容"
            rules={[
              {
                required: true,
              },
            ]}
          >
            <Input.TextArea />
          </Form.Item>
          <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
            <Button type="primary" htmlType="submit">
              提交
            </Button>
          </Form.Item>
        </Form>
      </Card>
    </div>
  );
};

export default NoticeView;
